html.dark {
  /*设置 vue 的主题，light 或者 dark*/
  color-scheme: dark;
}

html.dark .el-button {
  /*vue dark 主题下 element 禁用按钮的文字颜色*/
  --el-button-disabled-text-color: red;
}

html.dark .el-header {
  /*vue dark 主题下 element 头部的背景颜色*/
  --el-header-bg-color: #000;
  background-color: #000;
}

html.dark .el-main {
  /*vue dark 主题下 element 主体的背景颜色*/
  --el-main-bg-color: #000;
  background-color: #000;
}

html.dark .login_container .login_box {
  background-color: #000;
}

/* 头像盒子 */
html.dark .login_container .login_box .avatar_box {
  background-color: #000;
  border: #000;
}

/* svg图标 */
html.dark svg.icon {
  fill: currentColor;
  color: white;
}

/* 日历背景颜色 */
html.dark .el-calendar {
  --el-fill-color-blank: #1d1e1f
}

/* 登录界面背景颜色 */
html.dark .login_container {
  background: #6b6b83;
}

/* 媒体查询当前系统颜色主题，如果是暗黑模式自动切换为dark主题 */
@media (prefers-color-scheme: dark) {
  html.dark {
    /*设置 vue 的主题，light 或者 dark*/
    color-scheme: dark;
  }

  html.dark .el-button {
    /*vue dark 主题下 element 禁用按钮的文字颜色*/
    --el-button-disabled-text-color: red;
  }

  html.dark .el-header {
    /*vue dark 主题下 element 头部的背景颜色*/
    --el-header-bg-color: #000;
    background-color: #000;
  }

  html.dark .el-main {
    /*vue dark 主题下 element 主体的背景颜色*/
    --el-main-bg-color: #000;
    background-color: #000;
  }

  html.dark .login_container .login_box {
    background-color: #000;
  }

  html.dark .login_container .login_box .avatar_box {
    background-color: #000;
    border: #000;
  }

  html.dark svg.icon {
    fill: currentColor;
    color: white;
  }

  html.dark .el-calendar {
    --el-fill-color-blank: #1d1e1f
  }

  /* 登录界面背景颜色 */
  html.dark .login_container {
    background: #6b6b83;
  }
}